<template>
  <div id="goods">
    <div class="goods_params wrap">
      <div class="block clearfix">
        <div class="left_info">仓储：</div>
        <ul class="fl">
          <li
            @click="(formData.storeId = ''), search()"
            :class="formData.storeId == '' ? 'active' : ''"
          >
            全部仓储
          </li>
          <li
            @click="(formData.storeId = item.id), search()"
            :class="formData.storeId == item.id ? 'active' : ''"
            v-for="item in storeList"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="block clearfix">
        <div class="left_info">排序：</div>
        <ul class="fl">
          <li
            @click="(formData.sort = ''), search()"
            :class="formData.sort == '' ? 'active' : ''"
          >
            默认排序
          </li>
          <li
            @click="(formData.sort = 1), search()"
            :class="formData.sort == 1 ? 'active' : ''"
          >
            价格最低
          </li>
          <li
            @click="(formData.sort = 3), search()"
            :class="formData.sort == 3 ? 'active' : ''"
          >
            销量最高
          </li>
          <li
            @click="(formData.sort = 4), search()"
            :class="formData.sort == 4 ? 'active' : ''"
          >
            重量最重
          </li>
          <li
            @click="(formData.sort = 5), search()"
            :class="formData.sort == 5 ? 'active' : ''"
          >
            最新发布
          </li>
        </ul>
      </div>
    </div>
    <div class="goods_list wrap clearfix">
      <div class="item" v-for="item in goodsList" @click="buyGoods(item)">
        <dl>
          <dt>
            <img :src="item.cover | fullPath" alt="" />
          </dt>
          <dd class="title">
            {{ item.name }}
          </dd>
          <dd class="other">
            <span class="price fl"
              >￥{{ (parseFloat(item.cost)+parseFloat(item.profit)) }}</span
            >
            <span class="fr">{{ item.weight }} kg/件</span>
          </dd>
          <dd class="num">库存：{{ item.repertory }}件</dd>
          <dd class="btn">立即购买</dd>
        </dl>
      </div>
    </div>
    <div class="home_fy_block wrap">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page="formData.pageNo"
        :page-size="formData.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      formData: {
        pageNo: 1,
        pageSize: 20,
        sort: "",
        storeId: "",
        type: "",
        tenantid:localStorage.getItem('tenantInfoid')
      },
      total: 0,
      goodsList: [],
      typeList: [],
      storeList: [],
    };
  },
  created() {
    this.getTypeList();
    this.getStoreList();
    this.getGoodsList();
  },
  mounted() {},
  watch: {},
  methods: {
    handleCurrentChange(val) {
      this.formData.pageNo = val;
      this.getGoodsList();
    },
    search() {
      this.formData.pageNo = 1;
      this.getGoodsList();
    },
    //查看全部分类
    getTypeList() {
      this.$request.post({
        url: "/ReportApi/business/goodstypes",
        params: {},
        success: (res) => {
          for (let i = 0; i < res.length; i++) {
            res[i].createTime = res[i].create_time;
            delete res[i].create_time;
            res[i].otberId = res[i].other_id;
            delete res[i].other_id;
            res[i].otherType = res[i].other_type;
            delete res[i].other_type;
          }
          this.typeList = res;
          //consloe.log(res);
        },
      });
    },
    //查看全部仓库
    getStoreList() {
      this.$request.post({
        url: "/ReportApi/business/getstore",
        success: (res) => {
          this.storeList = res;
          //consloe.log(this.storeList2);
        },
      });
    },
    //查看商品列表
    getGoodsList() {
      this.$request.post({
        url: "/ReportApi/business/goodlists",
        params: this.formData,
        success: (res) => {
          this.goodsList = res[0];
          this.total = res[1];
        },
      });
    },
    //立即购买
    buyGoods(item) {
      this.$store.commit("getGoodsInfo", item);
      this.$router.push("/member/send_order");
    },
  },
};
</script>

<style lang="scss" scoped>
#goods {
  .goods_params {
    border: 1px solid #eee;
    border-radius: 4px;
    font-size: 14px;
    color: #666;
    .block {
      line-height: 50px;
      background: #fafafa;
      &:nth-child(1) {
        border-bottom: 1px solid #eee;
        background: #fff;
      }
      .left_info {
        float: left;
        padding-left: 20px;
        padding-right: 15px;
      }
      line-height: 50px;
      ul {
        li {
          float: left;
          padding: 0 10px;
          &:hover {
            cursor: pointer;
            color: #f80;
          }
        }
        .active {
          font-weight: bold;
          color: #f80;
        }
      }
    }
  }
  .goods_list {
    margin-top: 20px;
    margin-bottom: 20px;
    .item {
      width: 226px;
      border: 1px solid #eee;
      margin-bottom: 10px;
      margin-left: 10px;
      float: left;
      &:hover {
        cursor: pointer;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
      }
      dl {
        dt {
          width: 210px;
          margin: 0 auto;
          margin-top: 8px;
          img {
            width: 210px;
            height: 210px;
          }
        }
        dd {
          padding: 0 8px;
          font-size: 14px;
          color: #999;
        }
        .title {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          line-height: 34px;
        }
        .other {
          height: 28px;
          .price {
            color: #f80;
            font-size: 16px;
            font-weight: bold;
          }
        }
        .num {
          line-height: 34px;
          color: #333;
          border-top: 1px solid #efefef;
          border-bottom: 1px solid #efefef;
        }
        .btn {
          border-radius: 4px;
          color: #f80;
          border: 1px solid #f80;
          line-height: 28px;
          width: 180px;
          text-align: center;
          margin: 10px auto;
          &:hover {
            background: #f80;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>